<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.事件的绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				事件的绑定：
					1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名（xxx可以是：click、mouseenter、blur等等）；
					2.事件的回调函数需要配置在methods对象中，methods中的函数最终也会在vm身上（但不会做代理了，直接放上去的）；
					3.methods中配置的函数，是被Vue所管理的函数：
								(1).如果写成普通函数（以后肯定这么写），this的指向是vm 或 组件实例对象；（后期我们会学习组件）
								(2).如果成箭头函数（以后绝不这么写），this就不是vm了；
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>欢迎来到{{name}}学习</h2>
			<h3>学校坐落于：{{address}}</h3>
			<!-- 使用v-on绑定事件（普通写法） -->
			<button v-on:click="showMsg">欢迎新同学</button>
			<!-- 使用@绑定事件（简写，以后工作都这么写） -->
			<button @click="showMsg">欢迎新同学</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷',
				address:'宏福科技园',
			},
			methods:{
				showMsg(){ //此处一定要写普通函数，因为methods中所有配置的方法，都是由Vue管理的。
					console.log(this) //此处的this是vm
					alert(`同学你好，欢迎来${this.name}学习！,请乘车到${this.address}`)
				}
			}
		})

	</script>
</html>